<template>
    <div class="bgTransfer" v-show='tranferBox'>
            <div class="mainTransfer">
                    <p>
                       <span class='close' @click='close'></span>
                    </p>
                    <ul>
                        <li v-for='(item,index) in group' :key='index' :class="{activeTrans:index===CurrentIndex}">
                            <a href="#" @click='CustomerService(index)'>{{item}}</a>
                        </li>
                    </ul>

                    <div class="mainBox">

                            <!-- 客服组 -->
                            <div class="custom" v-show='tranfer'>
                                    <div class="TransferTitle">

                                            <!-- <input type="text" placeholder="搜索工号、姓名、昵称、分组"> -->
                                            <div class="tranferText">
                                                <span>刷新于{{UpdataTime}}</span>
                                                <a href="javascript:;" @click='currentStatusImg'>刷新</a>
                                            </div>
                                    </div>   

                                      <el-table
                                          :data="tableData"
                                          style="width: 100%"
                                        >
                                            <el-table-column
                                            prop="customerSn"
                                            label="工号"
                                            sortable
                                            width="120">
                                            </el-table-column>
                                            <el-table-column
                                            prop="name"
                                            label="客服昵称"
                                            sortable
                                            width="400">
                                            </el-table-column>
                                            <el-table-column
                                            prop="status"
                                            width="200"
                                            label="接待状态"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                            label="操作"
                                            style='width:20'
                                            :formatter="formatter">
                                            <template slot-scope="scope">
                                                <el-button @click="handleClick(scope.row)" type="text" size="small">转接</el-button>
                                            </template>
                                            </el-table-column>
                                    </el-table>
                            </div>

                             <!-- 技能组 -->
                            <div class="custom Skill" v-show='Skill'>
                                    <div class="TransferTitle">

                                            <input type="text" placeholder="搜索技能组">
                                            <div class="tranferText">
                                                <span>刷新于09:01:54</span>
                                                <a href="javascript:;">刷新</a>
                                            </div>
                                    </div>   

                                    <table>
                                        <thead>
                                            <tr>
                                                <th>技能组名称</th>
                                                <th>在线客服数</th>
                                                <th>未饱和客服数</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>深刻的风景</td>
                                                <td>50</td>
                                                <td>23</td>
                                                <td><a href="javascript:;">转接</a></td>
                                            </tr>

                                        </tbody>
                                    </table>

                            </div>
                    </div>
            </div>
    </div>
</template>


<script>
import chat from "../../libs/chat";
import contentQ from "../contentQ";
export default {
  name: "transfer",
  data() {
    return {
      tranfer: true, //客服组和技能组的显示隐藏
      CurrentIndex: 0,
      group: ["转接给客服"], //'转接给技能组'
      tranferBox: false,
      Skill: false,
      tableData: [],
      cvaId: "",
      UpdataTime: ""
    };
  },
  methods: {
    //转接
    handleClick(row) {
      let _self = this;
      console.log(row);
      chat.transferCva(this.cvaId, row.agentId, function(res) {
        if (res.code === 200) {
          _self.$notify({
            title: "转接提示",
            message: "转接成功"
          });

          contentQ.$emit("cvaId", _self.cvaId); //关闭左侧相关联系人
          contentQ.$emit("showChatBox", false); //关闭当前会话框
          contentQ.$emit("showAccess", false); //关闭右侧信息
          _self.tranferBox = false;
          console.log(_self.cvaId);
        } else {
          _self.tranferBox = true;
          _self.$message({
            title: "转接客服",
            message: res.message,
            type: "error"
          });
        }
        // console.log(res.code);
      });
    },
    formatter(row, column) {
      return row.address;
    },

    //获取客服
    currentStatusImg() {
      let _self = this;
      chat.onlineCs(function(res) {
        let data = res.data;
        if (res.code === 200) {
          _self.tableData = [];
          for (let i = 0; i < data.length; i++) {
            if (data[i].customerSn) {
              _self.tableData.push({
                agentId: data[i].userId, //客服id
                customerSn: data[i].customerSn, //客服工号
                name: data[i].name,
                status: data[i].status.text
              });
            } else {
              _self.tableData.push({
                agentId: data[i].userId, //客服id
                customerSn: "暂无设置", //客服工号
                name: data[i].name,
                status: data[i].status.text
              });
            }
          }
          _self.UpdataTime = new Date().toLocaleString();
        } else {
          _self.$message.error(res.message);
        }
      });
    },

    //转接
    transfer() {
      chat.transferCva(cvaId, csId, function(res) {
        console.log(res);
      });
    },

    //显示客服组
    CustomerService(index) {
      this.CurrentIndex = index;
      //this.tranfer =! this.tranfer;
    },

    //显示转接的组件
    openranferBox(user) {
      console.log(user);
      this.cvaId = user.cvaId;
      /// console.log(this.cvaId);
      this.tranferBox = true;
      this.currentStatusImg();
    },

    //关闭
    close() {
      this.tranferBox = false;
    }
  }
};
</script>


<style scoped>
.bgTransfer {
  background: rgba(99, 99, 99, 0.7);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 20;
}

.bgTransfer .mainTransfer {
  width: 855px;
  padding: 1rem;
  margin: 13rem auto;
  background: #fff;
}

.mainTransfer .close {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("../../assets/icon/close.png") center center no-repeat;
  background-size: 1rem;
}

.mainTransfer > p {
  text-align: right;
}

.bgTransfer .mainTransfer ul {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.bgTransfer .mainTransfer ul li a {
  display: inline-block;
  padding: 1rem;
}

.bgTransfer .mainTransfer ul .activeTrans {
  border-bottom: 1px solid #66bbda;
}

.bgTransfer .mainTransfer ul .activeTrans a {
  color: #66bbda;
}

.bgTransfer .TransferTitle {
  display: flex;
  width: 100%;
  padding: 1rem 0;
}

.bgTransfer .TransferTitle input[type="text"] {
  width: 50%;
  padding: 0.3rem 1rem;
  outline: none;
}

.bgTransfer .TransferTitle .tranferText {
  width: 100%;
  text-align: right;
  font-size: 12px;
  line-height: 21px;
}

.bgTransfer .TransferTitle .tranferText a {
  margin-left: 0.5rem;
}

.bgTransfer table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ededed;
}

.bgTransfer table thead {
  line-height: 2rem;
  background: #f4f6fa;
}

.bgTransfer table tr th {
  padding: 0.5rem 0;
  font-size: 0.83rem;
  font-weight: 400;
  border-left: 1px solid #ededed;
}

.bgTransfer table tr td {
  text-align: center;
  font-size: 0.83rem;
  border-right: 1px solid #ededed;
  padding: 0.8rem 0;
}

.bgTransfer table tr td:last-child a {
  color: #62bad8;
  text-decoration: none;
}

.bgTransfer .nothing {
  color: #999999;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.78rem;
  border-bottom: 1px solid #ededed;
}

.Skill table tr th:first-child,
.Skill table tr td:first-child {
  width: 47%;
  padding-left: 1rem;
  text-align: left;
}
</style>
